1 //Javascript name: My Date Time Picker
2 //Date created: 16-Nov-2003 23:19
3 //Scripter: TengYong Ng
4 //Website: http://www.rainforestnet.com
5 //Copyright (c) 2003 TengYong Ng
6 //FileName: DateTimePicker.js
7 //Version: 0.8
8 //Contact: contact@rainforestnet.com
9 // Note: Permission given to use this script in ANY kind of applications if
10 // header lines are left unchanged.
11
12 //Global variables
13 var winCal;
14 var dtToday=new Date();
15 var Cal;
16 var docCal;
17 var MonthName=["January", "February", "March", "April", "May", "June","July",
18 "August", "September", "October", "November", "December"];
19 var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
20 var exDateTime;//Existing Date and Time
21
22 //Configurable parameters
23 var cnTop="200";//top coordinate of calendar window.
24 var cnLeft="500";//left coordinate of calendar window
25 var WindowTitle ="DateTime Picker";//Date Time Picker title.
26 var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
27 var CellWidth=20;//Width of day cell.
28 var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
29 var TimeMode=24;//default TimeMode value. 12 or 24
30
31 var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
32 var ShowMonthYear=true;//Show Month and Year in Calendar header.
33 var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
34 var WeekHeadColor="#0099CC";//Background Color in Week header.
35 var SundayColor="#6699FF";//Background color of Sunday.
36 var SaturdayColor="#CCCCFF";//Background color of Saturday.
37 var WeekDayColor="white";//Background color of weekdays.
38 var FontColor="blue";//color of font in Calendar day cell.
39 var TodayColor="#FFFF33";//Background color of today.
40 var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
41 var YrSelColor="#cc0033";//color of font of Year selector.
42 var ThemeBg="";//Background image of Calendar window.
43 //end Configurable parameters
44 //end Global variable
45
46 function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
47 {
48 Cal=new Calendar(dtToday);
49 if ((pShowTime!=null) && (pShowTime))
50 {
51 Cal.ShowTime=true;
52 if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))
53 {
54 TimeMode=pTimeMode;
55 }
56 }
57 if (pCtrl!=null)
58 Cal.Ctrl=pCtrl;
59 if (pFormat!=null)
60 Cal.Format=pFormat.toUpperCase();
61
62 exDateTime=document.getElementById(pCtrl).value;
63 if (exDateTime!="")//Parse Date String
64 {
65 var Sp1;//Index of Date Separator 1
66 var Sp2;//Index of Date Separator 2
67 var tSp1;//Index of Time Separator 1
68 var tSp1;//Index of Time Separator 2
69 var strMonth;
70 var strDate;
71 var strYear;
72 var intMonth;
73 var YearPattern;
74 var strHour;
75 var strMinute;
76 var strSecond;
77 //parse month
78 Sp1=exDateTime.indexOf(DateSeparator,0)
79 Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));
80
81 if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
82 {
83 strMonth=exDateTime.substring(Sp1+1,Sp2);
84 strDate=exDateTime.substring(0,Sp1);
85 }
86 else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
87 {
88 strMonth=exDateTime.substring(0,Sp1);
89 strDate=exDateTime.substring(Sp1+1,Sp2);
90 }
91 if (isNaN(strMonth))
92 intMonth=Cal.GetMonthIndex(strMonth);
93 else
94 intMonth=parseInt(strMonth,10)-1;
95 if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
96 Cal.Month=intMonth;
97 //end parse month
98 //parse Date
99 if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
100 Cal.Date=strDate;
101 //end parse Date
102 //parse year
103 strYear=exDateTime.substring(Sp2+1,Sp2+5);
104 YearPattern=/^\d{4}$/;
105 if (YearPattern.test(strYear))
106 Cal.Year=parseInt(strYear,10);
107 //end parse year
108 //parse time
109 if (Cal.ShowTime==true)
110 {
111 tSp1=exDateTime.indexOf(":",0)
112 tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
113 strHour=exDateTime.substring(tSp1,(tSp1)-2);
114 Cal.SetHour(strHour);
115 strMinute=exDateTime.substring(tSp1+1,tSp2);
116 Cal.SetMinute(strMinute);
117 strSecond=exDateTime.substring(tSp2+1,tSp2+3);
118 Cal.SetSecond(strSecond);
119 }
120 }
121 winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=245,resizable=0,top="+cnTop+",left="+cnLeft);
122 docCal=winCal.document;
123 RenderCal();
124 }
125
126 function RenderCal()
127 {
128 var vCalHeader;
129 var vCalData;
130 var vCalTime;
131 var i;
132 var j;
133 var SelectStr;
134 var vDayCount=0;
135 var vFirstDay;
136
137 docCal.open();
138 docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
139 docCal.writeln("<script>var winMain=window.opener;</script>");
140 docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");
141
142 vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n";
143 //Month Selector
144 vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
145 vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
146 for (i=0;i<12;i++)
147 {
148 if (i==Cal.Month)
149 SelectStr="Selected";
150 else
151 SelectStr="";
152 vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
153 }
154 vCalHeader+="</select></td>";
155 //Year selector
156 vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n";
157 vCalHeader+="</tr>";
158 //Calendar header shows Month and Year
159 if (ShowMonthYear)
160 vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n";
161 //Week day header
162 vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
163 for (i=0;i<7;i++)
164 {
165 vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
166 }
167 vCalHeader+="</tr>";
168 docCal.write(vCalHeader);
169
170 //Calendar detail
171 CalDate=new Date(Cal.Year,Cal.Month);
172 CalDate.setDate(1);
173 vFirstDay=CalDate.getDay();
174 vCalData="<tr>";
175 for (i=0;i<vFirstDay;i++)
176 {
177 vCalData=vCalData+GenCell();
178 vDayCount=vDayCount+1;
179 }
180 for (j=1;j<=Cal.GetMonDays();j++)
181 {
182 var strCell;
183 vDayCount=vDayCount+1;
184 if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
185 strCell=GenCell(j,true,TodayColor);//Highlight today's date
186 else
187 {
188 if (j==Cal.Date)
189 {
190 strCell=GenCell(j,true,SelDateColor);
191 }
192 else
193 {
194 if (vDayCount%7==0)
195 strCell=GenCell(j,false,SaturdayColor);
196 else if ((vDayCount+6)%7==0)
197 strCell=GenCell(j,false,SundayColor);
198 else
199 strCell=GenCell(j,null,WeekDayColor);
200 }
201 }
202 vCalData=vCalData+strCell;
203
204 if((vDayCount%7==0)&&(j<Cal.GetMonDays()))
205 {
206 vCalData=vCalData+"</tr>\n<tr>";
207 }
208 }
209 docCal.writeln(vCalData);
210 //Time picker
211 if (Cal.ShowTime)
212 {
213 var showHour;
214 showHour=Cal.getShowHour();
215 vCalTime="<tr>\n<td colspan='7' align='center'>";
216 vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";
217 vCalTime+=" : ";
218 vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";
219 vCalTime+=" : ";
220 vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";
221 if (TimeMode==12)
222 {
223 var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
224 var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";
225
226 vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
227 vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
228 vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
229 vCalTime+="</select>";
230 }
231 vCalTime+="\n</td>\n</tr>";
232 docCal.write(vCalTime);
233 }
234 //end time picker
235 docCal.writeln("\n</table>");
236 docCal.writeln("</form></body></html>");
237 docCal.close();
238 }
239
240 function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
241 {
242 var PValue;
243 var PCellStr;
244 var vColor;
245 var vHLstr1;//HighLight string
246 var vHlstr2;
247 var vTimeStr;
248
249 if (pValue==null)
250 PValue="";
251 else
252 PValue=pValue;
253
254 if (pColor!=null)
255 vColor="bgcolor=\""+pColor+"\"";
256 else
257 vColor="";
258 if ((pHighLight!=null)&&(pHighLight))
259 {vHLstr1="color='red'><b>";vHLstr2="</b>";}
260 else
261 {vHLstr1=">";vHLstr2="";}
262
263 if (Cal.ShowTime)
264 {
265 vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
266 if (TimeMode==12)
267 vTimeStr+="+' '+winMain.Cal.AMorPM";
268 }
269 else
270 vTimeStr="";
271 PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
272 return PCellStr;
273 }
274
275 function Calendar(pDate,pCtrl)
276 {
277 //Properties
278 this.Date=pDate.getDate();//selected date
279 this.Month=pDate.getMonth();//selected month number
280 this.Year=pDate.getFullYear();//selected year in 4 digits
281 this.Hours=pDate.getHours();
282
283 if (pDate.getMinutes()<10)
284 this.Minutes="0"+pDate.getMinutes();
285 else
286 this.Minutes=pDate.getMinutes();
287
288 if (pDate.getSeconds()<10)
289 this.Seconds="0"+pDate.getSeconds();
290 else
291 this.Seconds=pDate.getSeconds();
292
293 this.MyWindow=winCal;
294 this.Ctrl=pCtrl;
295 this.Format="ddMMyyyy";
296 this.Separator=DateSeparator;
297 this.ShowTime=false;
298 if (pDate.getHours()<12)
299 this.AMorPM="AM";
300 else
301 this.AMorPM="PM";
302 }
303
304 function GetMonthIndex(shortMonthName)
305 {
306 for (i=0;i<12;i++)
307 {
308 if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
309 { return i;}
310 }
311 }
312 Calendar.prototype.GetMonthIndex=GetMonthIndex;
313
314 function IncYear()
315 { Cal.Year++;}
316 Calendar.prototype.IncYear=IncYear;
317
318 function DecYear()
319 { Cal.Year--;}
320 Calendar.prototype.DecYear=DecYear;
321
322 function SwitchMth(intMth)
323 { Cal.Month=intMth;}
324 Calendar.prototype.SwitchMth=SwitchMth;
325
326 function SetHour(intHour)
327 {
328 var MaxHour;
329 var MinHour;
330 if (TimeMode==24)
331 { MaxHour=23;MinHour=0}
332 else if (TimeMode==12)
333 { MaxHour=12;MinHour=1}
334 else
335 alert("TimeMode can only be 12 or 24");
336 var HourExp=new RegExp("^\\d\\d$");
337 if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
338 {
339 if ((TimeMode==12) && (Cal.AMorPM=="PM"))
340 {
341 if (parseInt(intHour,10)==12)
342 Cal.Hours=12;
343 else
344 Cal.Hours=parseInt(intHour,10)+12;
345 }
346 else if ((TimeMode==12) && (Cal.AMorPM=="AM"))
347 {
348 if (intHour==12)
349 intHour-=12;
350 Cal.Hours=parseInt(intHour,10);
351 }
352 else if (TimeMode==24)
353 Cal.Hours=parseInt(intHour,10);
354 }
355 }
356 Calendar.prototype.SetHour=SetHour;
357
358 function SetMinute(intMin)
359 {
360 var MinExp=new RegExp("^\\d\\d$");
361 if (MinExp.test(intMin) && (intMin<60))
362 Cal.Minutes=intMin;
363 }
364 Calendar.prototype.SetMinute=SetMinute;
365
366 function SetSecond(intSec)
367 {
368 var SecExp=new RegExp("^\\d\\d$");
369 if (SecExp.test(intSec) && (intSec<60))
370 Cal.Seconds=intSec;
371 }
372 Calendar.prototype.SetSecond=SetSecond;
373
374 function SetAmPm(pvalue)
375 {
376 this.AMorPM=pvalue;
377 if (pvalue=="PM")
378 {
379 this.Hours=(parseInt(this.Hours,10))+12;
380 if (this.Hours==24)
381 this.Hours=12;
382 }
383 else if (pvalue=="AM")
384 this.Hours-=12;
385 }
386 Calendar.prototype.SetAmPm=SetAmPm;
387
388 function getShowHour()
389 {
390 var finalHour;
391 if (TimeMode==12)
392 {
393 if (parseInt(this.Hours,10)==0)
394 {
395 this.AMorPM="AM";
396 finalHour=parseInt(this.Hours,10)+12;
397 }
398 else if (parseInt(this.Hours,10)==12)
399 {
400 this.AMorPM="PM";
401 finalHour=12;
402 }
403 else if (this.Hours>12)
404 {
405 this.AMorPM="PM";
406 if ((this.Hours-12)<10)
407 finalHour="0"+((parseInt(this.Hours,10))-12);
408 else
409 finalHour=parseInt(this.Hours,10)-12;
410 }
411 else
412 {
413 this.AMorPM="AM";
414 if (this.Hours<10)
415 finalHour="0"+parseInt(this.Hours,10);
416 else
417 finalHour=this.Hours;
418 }
419 }
420 else if (TimeMode==24)
421 {
422 if (this.Hours<10)
423 finalHour="0"+parseInt(this.Hours,10);
424 else
425 finalHour=this.Hours;
426 }
427 return finalHour;
428 }
429 Calendar.prototype.getShowHour=getShowHour;
430
431 function GetMonthName(IsLong)
432 {
433 var Month=MonthName[this.Month];
434 if (IsLong)
435 return Month;
436 else
437 return Month.substr(0,3);
438 }
439 Calendar.prototype.GetMonthName=GetMonthName;
440
441 function GetMonDays()//Get number of days in a month
442 {
443 var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
444 if (this.IsLeapYear())
445 {
446 DaysInMonth[1]=29;
447 }
448 return DaysInMonth[this.Month];
449 }
450 Calendar.prototype.GetMonDays=GetMonDays;
451
452 function IsLeapYear()
453 {
454 if ((this.Year%4)==0)
455 {
456 if ((this.Year%100==0) && (this.Year%400)!=0)
457 {
458 return false;
459 }
460 else
461 {
462 return true;
463 }
464 }
465 else
466 {
467 return false;
468 }
469 }
470 Calendar.prototype.IsLeapYear=IsLeapYear;
471
472 function FormatDate(pDate)
473 {
474 if (this.Format.toUpperCase()=="DDMMYYYY")
475 return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
476 else if (this.Format.toUpperCase()=="DDMMMYYYY")
477 return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
478 else if (this.Format.toUpperCase()=="MMDDYYYY")
479 return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
480 else if (this.Format.toUpperCase()=="MMMDDYYYY")
481 return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);
482 }
483 Calendar.prototype.FormatDate=FormatDate;
